<template>
	<div class="carbon-dashboard">
		<el-row :gutter="20">
			<!-- 左侧建设目标 -->
			<el-col :span="6">
				<el-card>
					<div class="card-header">
						<span>建设目标</span>
						<el-link type="primary" class="add-btn" @click="$refs.saveTargetVue.open()">新增</el-link>
					</div>
					<div v-for="(item, idx) in targets" :key="idx" class="pad20" @click="$refs.saveTargetVue.open(item)">
						<div class="font16">{{ item.year }}</div>
						<div class="pad10">
							<div v-for="(goal, i) in item.contentList" :key="i">{{ goal }}</div>
						</div>
					</div>
				</el-card>
			</el-col>

			<!-- 右侧内容 -->
			<el-col :span="18">
				<el-row :gutter="20">
					<!-- 零碳园区 -->
					<el-col :span="24">
						<el-card>
							<div class="card-header">
								<span>零碳园区</span>
								<el-link type="primary" class="add-btn" @click="$refs.savePark.open()">新增</el-link>
							</div>
							<el-table :data="parks" border>
								<el-table-column prop="parkName" label="园区名称" />
								<el-table-column prop="cantonName" label="归属" />
								<el-table-column prop="planBuildTime" label="计划建设时间" />
								<el-table-column prop="actualBuildTime" label="计划建成时间" />
								<el-table-column prop="stateStr" label="当前状态" />
								<el-table-column fixed="right" label="操作" width="100">
									<template slot-scope="scope">
										<el-button @click="deleteThis(scope.row)" type="text" size="small"
											style="color: brown;">删除</el-button>
										<el-button type="text" size="small" @click="$refs.savePark.open(scope.row)">编辑</el-button>
									</template>
								</el-table-column>
							</el-table>
							</el-table>
						</el-card>
					</el-col>
					<!-- 碳抵消项目 -->
					<el-col :span="24" style="margin-top: 20px;">
						<el-card>
							<div class="card-header">
								<span>碳抵消项目</span>
								<el-link type="primary" class="add-btn" @click="$refs.saveOffsetSubject.open()">新增</el-link>
							</div>
							<el-table :data="projects" border>
								<el-table-column prop="subjectName" label="项目名称" />
								<el-table-column prop="entName" label="归属单位" />
								<el-table-column prop="planBuildTime" label="计划建设时间" />
								<el-table-column prop="actualBuildTime" label="计划建成时间" />
								<el-table-column prop="planOffsetQty" label="计划减碳量" />
								<el-table-column prop="stateStr" label="当前状态" />
								<el-table-column fixed="right" label="操作" width="100">
									<template slot-scope="scope">
										<el-button @click="deleteThis2(scope.row)" type="text" size="small"
											style="color: brown;">删除</el-button>
										<el-button type="text" size="small" @click="$refs.saveOffsetSubject.open(scope.row)">编辑</el-button>
									</template>
								</el-table-column>
							</el-table>
						</el-card>
					</el-col>
				</el-row>
			</el-col>
		</el-row>

		<saveTargetVue ref="saveTargetVue"></saveTargetVue>
		<savePark ref="savePark"></savePark>
		<saveOffsetSubject ref="saveOffsetSubject"></saveOffsetSubject>
	</div>
</template>

<script>
	let that
	import saveTargetVue from './components/saveTarget.vue';
	import savePark from './components/savePark.vue';
	import saveOffsetSubject from './components/saveOffsetSubject.vue';
	export default {
		components: {
			saveTargetVue,
			savePark,
			saveOffsetSubject
		},
		data() {
			return {
				targets: {},
				parks: [],
				projects: []
			}
		},

		mounted() {
			that = this
			that.getTargetList()
			that.parkPage()
			that.offsetSubject()
		},

		methods: {
			deleteThis2(item){
				this.$confirm('是否确认删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: 'gov/carbon/offsetSubject/deleteLogic?ticketId=' + that.$store.state.token,
						data: {
							id:item.id
						},
						contentType: 'application/x-www-form-urlencoded',
						success: function(result) {
							that.offsetSubject()
							that.$message({
								type: 'success',
								message: '删除成功!'
							});
						}
					})
				})
			},
			
			deleteThis(item) {
				this.$confirm('是否确认删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/gov/carbon/park/deleteLogic?ticketId=' + that.$store.state.token,
						data: {
							id:item.id
						},
						contentType: 'application/x-www-form-urlencoded',
						success: function(result) {
							that.parkPage()
							that.$message({
								type: 'success',
								message: '删除成功!'
							});
						}
					})
				})
			},

			offsetSubject() {
				that.ajax({
					url: '/gov/carbon/offsetSubject/page?pageIndex=1&pageSize=10&ticketId=' + that.$store.state.token,
					data: JSON.stringify({}),
					contentType: 'application/json',
					success: function(result) {
						that.projects = result.data.records
					}
				})
			},

			parkPage() {
				that.ajax({
					url: '/gov/carbon/park/page?pageIndex=1&pageSize=10&ticketId=' + that.$store.state.token,
					data: JSON.stringify({}),
					contentType: 'application/json',
					success: function(result) {
						that.parks = result.data.records
					}
				})
			},

			getTargetList() {
				that.ajax({
					url: '/gov/carbon/target/list',
					data: JSON.stringify({}),
					contentType: 'application/json',
					success: function(result) {
						that.targets = result.data
					}
				})
			}
		}
	}
</script>

<style scoped>
	.carbon-dashboard {
		padding: 20px;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.add-btn {
		font-size: 14px;
		cursor: pointer;
	}

	.target-block {
		margin-bottom: 20px;
	}
</style>